import { useMemo } from 'react'
import BiEcharts from '@/components/BiEcharts'
import useChart from '../hooks/echarts/useChart'
import { LineChart } from 'echarts/charts'

const Line = ({ widgetId }) => {
  const { theme, grid, legend, dataZoom, tooltip, categoryAxis, series, lib } = useChart(
    widgetId,
    LineChart
  )

  const options = useMemo(() => {
    return {
      ...legend,
      ...dataZoom,
      ...tooltip,
      grid,
      xAxis: categoryAxis,
      yAxis: {
        type: 'value'
      },
      series: series
    }
  }, [legend, dataZoom, tooltip, categoryAxis, series])

  return (
    <BiEcharts lib={lib} theme={theme} option={options} style={{ height: '100%', width: '100%' }} />
  )
}

export default Line
